<template>
  <nav v-if="shouldShowPagination" :aria-label="ariaLabel">
    <ul class="pagination justify-content-center">
      <li class="page-item" :class="{ disabled: !pagination.hasPreviousPage }">
        <router-link
          v-if="pagination.hasPreviousPage"
          :to="getPageRoute(pagination.pageNumber - 1)"
          class="page-link"
        >
          上一页
        </router-link>
        <span v-else class="page-link">上一页</span>
      </li>
      
      <li
        v-for="page in displayedPages"
        :key="page"
        class="page-item"
        :class="{ active: page === pagination.pageNumber }"
      >
        <router-link 
          v-if="page !== '...'" 
          :to="getPageRoute(page)" 
          class="page-link"
        >
          {{ page }}
        </router-link>
        <span v-else class="page-link">...</span>
      </li>
      
      <li class="page-item" :class="{ disabled: !pagination.hasNextPage }">
        <router-link
          v-if="pagination.hasNextPage"
          :to="getPageRoute(pagination.pageNumber + 1)"
          class="page-link"
        >
          下一页
        </router-link>
        <span v-else class="page-link">下一页</span>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  name: 'PaginationComponent',
  props: {
    pagination: {
      type: Object,
      required: true,
      default: () => ({
        pageNumber: 1,
        totalPages: 1,
        hasPreviousPage: false,
        hasNextPage: false,
        totalItems: 0
      })
    },
    routeName: {
      type: String,
      default: 'ArticleListPaged'
    },
    routeParams: {
      type: Object,
      default: () => ({})
    },
    ariaLabel: {
      type: String,
      default: '分页导航'
    },
    showSinglePage: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    shouldShowPagination() {
      return this.pagination && 
             this.pagination.totalPages && 
             this.pagination.totalPages >= 1 &&
             this.pagination.pageNumber &&
             this.pagination.totalItems > 0 &&
             (this.pagination.totalPages > 1 || this.showSinglePage)
    },
    
    displayedPages() {
      const { pageNumber, totalPages } = this.pagination
      const delta = 2
      
      if (totalPages <= 7) {
        return Array.from({ length: totalPages }, (_, i) => i + 1)
      }
      
      const range = []
      const left = Math.max(1, pageNumber - delta)
      const right = Math.min(totalPages, pageNumber + delta)
      
      if (left > 1) {
        range.push(1)
        if (left > 2) {
          range.push('...')
        }
      }
      
      for (let i = left; i <= right; i++) {
        range.push(i)
      }
      
      if (right < totalPages) {
        if (right < totalPages - 1) {
          range.push('...')
        }
        range.push(totalPages)
      }
      
      return range
    }
  },
  methods: {
    getPageRoute(pageNumber) {
      if (this.routeName === 'ArticleListPaged') {
        return { name: this.routeName, params: { pageNumber } }
      } else if (this.routeName === 'CategoryDetailPaged') {
        return { 
          name: this.routeName, 
          params: { 
            id: this.routeParams.id, 
            pageNumber 
          } 
        }
      }
      
      return { name: this.routeName, params: { pageNumber } }
    }
  }
}
</script>

<style scoped>
nav {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.pagination {
  margin-bottom: 0;
}

.page-link {
  color: #0d6efd;
  text-decoration: none;
  border: 1px solid #dee2e6;
}

.page-link:hover {
  color: #0a58ca;
  background-color: #e9ecef;
}

.page-item.active .page-link {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: white;
}

.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
  border-color: #dee2e6;
}
</style>